const path = require("path");
// 先导入html-webpack-plugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:"./src/index.js",

    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "build"),
        // 每次生成的出口文件会覆盖前面的，并删除多余的出口文件
        clean: true,
        // 资源出口文件名的定义
        assetModuleFilename:'images/[hash][ext][query]'
    },
    // 出口文件每次都要手动编写html文件进行显示，可以使用模板自动在出口文件中生成html文件
    // 使用html-webpack-plugin插件
    plugins: [
        new HtmlWebpackPlugin({
            title: "自定义标题",
            template:'./src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use:['style-loader','css-loader']
            },
            {
                test: /\.(jpg|png|jpeg|svg|gif)$/i,
                type: "asset",
                // 图片解析方式，小于10kb的使用字符串编码
                parser: {
                    dataUrlCondition: {
                        maxSize:10*1024
                    }
                }
            },
            // 字体的处理
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type:"asset/resource"
            }
        

        ]
    }
}